<template>
<view class="bg-page">
	<view class="header-box">
		<view class="icon-bank" @click="bankBtn"></view>
		商家二维码
	</view>
	<view class="pad">
		<view class="box-ff">
			<view class="title">
				<image src="/static/images/mallShop/wallet.png" class="icon-wallet" mode=""></image>
				收款二维码
			</view>
			<view class="content">
				<view class="name">
					{{ name }}
				</view>
				<view class="code-box">
					<image :src="url" class="code-img" mode=""></image>
				</view>
				<view class="step-box">
					<image src="/static/images/mallShop/step.png" class="icon-step" mode=""></image>
					<view class="step-info">
						<view class="">
							扫一扫
						</view>
						<view class="">
							扫描二维码
						</view>
						<view class="">
							支付成功
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add-btn" @tap="save">
			保存图片
		</view>
	
	</view>
</view>
</template>

<script>
	import {isLogin, shop_qrcode, shopDetail} from '@/api/substitution.js'
	
	export default {
		data(){
			return {
				url: '',
				name: '',
				shop_id: null
			}
		},
		onLoad(e) {
			// 获取商家id
			this.shop_id = e.shop_id ? e.shop_id : 1;
			
			isLogin();
			
			this.details()
			this.getCodeImg()
		},
		methods: {
			bankBtn(){
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 保存图片
			save(url){
				let _this = this;
				uni.showLoading({
					mask: true,
					title: '正在保存中'
				})
				uni.saveImageToPhotosAlbum({
					filePath: this.url,
					success: () => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
					},
				});
			},
			
			// 二维码图片
			getCodeImg(){
				shop_qrcode({
					shop_id: 1
				}).then(res=>{
					if(res.code === 1){
						this.url = 'http://hzh.chinahuishe.com/' + res.data.pathname
					}
				})
			},
			
			// 商家详情
			details() {
				shopDetail({
					shop_id: this.shop_id
				}).then(res => {
					this.name = res.data.detail.shop_name
				})
			}
			
		},
	}
</script>

<style scoped lang="scss">
	.bg-page{
		background: linear-gradient(-90deg, #FE4A32 0%, #FE7E48 100%);
		color: #FFFFFF;
		height: 100vh;
	}
	.header-box{
		height: 100rpx;
		position: relative;
		text-align:center;
		line-height: 100rpx;
		font-size: 36rpx;
		padding-top: 50rpx;
		.icon-bank{
			transform: translateY(-70%) rotate(-45deg);
			border-top:1px solid #FFFFFF;
			border-left:1px solid #FFFFFF;
			width: 20rpx;
			height: 20rpx;
			position: absolute;
			left:30rpx;
			top: 70%;
		}
	}
	.box-ff{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 70rpx;
		text-align: center;
		padding-bottom: 30rpx;
		.title{
			height: 130rpx;
			padding-left:30rpx;
			display: flex;
			align-items: center;
			color: #FA7518;
			font-size: 38rpx;
			background-color: #F8F8F8;
			.icon-wallet{
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
		}
		.content{
			padding-top:50rpx;
			.name{
				color: #333333;
				font-size: 36rpx;
			}
			.code-box{
				margin-top: 60rpx;
			}
			.code-img{
				width: 420rpx;
				height: 420rpx;
			}
			.step-box{
				margin-top: 50rpx;
				.icon-step{
					width: 420rpx;
					height: 60rpx;
				}
				.step-info{
					display: flex;
					justify-content: space-between;
					color: #999999;
					font-size: 26rpx;
					width: 480rpx;
					margin:10rpx auto 0;
					
					view {
						&:nth-of-type(1) {
							margin-left: 15rpx;
						}
						&:nth-of-type(2) {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
	.add-btn{
		@include btnStyle(690,80);
		@include flexCenter();
		background-color: #FFFFFF;
		color: #FE5638;
		font-size: 34rpx;
		margin:40rpx auto 0;
	}
</style>
